<template>
  <div>
    <el-dialog
      v-model="dialogData.dialogVisible"
      :title="dialogData.title"
      :width="dialogData.width"
      destroy-on-close
      draggable
      append-to-body
      :before-close="handleClose"
    >
      <el-transfer
        style="text-align: center;"
        v-model="disCoulum"
        filterable
        filter-placeholder="搜索字段"
        :titles="['显示字段', '隐藏字段']"
        :data="data"
        @change="handleChange"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogData.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="determine">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import handleColumn from "./tableHooks";
import { ElMessage } from 'element-plus'
let props = defineProps({
  tableOption: {
    type: Object,
    required: true,
    default: {},
  },
});
interface Option {
  key: number;
  label: string;
}
let dialogData = reactive({
  dialogVisible: false,
  title: "设置表头",
  width: "50%",
});
let { columns,setCoulums } = handleColumn(props.tableOption.column);
const generateData = () => {
  const data: Option[] = [];
  columns.forEach((item: any) => {
    if (item.field) {
      data.push({
        key: item.field,
        label: item.title,
      });
    }
  });
  return data;
};
const data = ref<Option[]>(generateData());
const disCoulum = ref([]);
disCoulum.value = columns.map((col: any) => {
  if (col.visible == false) {
    return col.field;
  }
});
const filterMethod = (query: any, item: any) => {
  // return item.value.initial.toLowerCase().includes(query.value.toLowerCase())
};
const handleChange = (value:any) => {
  disCoulum.value = value
};
const handleClose = () => {
  dialogData.dialogVisible = false;
};
const determine = () => {
  setCoulums(disCoulum.value)
  dialogData.dialogVisible = false
  ElMessage({
    showClose: true,
    message: '设置成功',
    type: 'success',
  })
};
defineExpose({
  dialogData,
});
</script>

<style scoped></style>
